<template>
	<view class="content">
		<!-- F1：自定义导航条 -->
		<uni-nav-bar left-icon="back" left-text="返回" right-icon="list" title="缴 费" @clickLeft="back"
			@clickRight="jump('/pages/feeHistory/feeHistory')" background-color="#090" color="#fff"></uni-nav-bar>

		<!-- F2：缴费类型&金额 -->
		<!-- thumb：图标 -->
		<!-- thumb-size：图标大小，lg/medium/sm -->
		<uni-list class="f2">
			<uni-list-item :thumb="`../../static/img/${feeTypeIcons[type]}`" thumb-size="lg" :title="feeTypes[type]">
				<!-- 定制列表项右侧插槽中的内容 -->
				<template v-slot:footer>
					<view class="pay-amount">
						<input type="digit" v-model="amount" placeholder="请输入支付金额" />
						<text>元</text>
					</view>
				</template>
			</uni-list-item>
		</uni-list>

		<!-- F3：缴费详情 -->
		<!-- link：为列表项右侧添加箭头 + 跳转 + 点击反馈 -->
		<!-- showArrow：为列表项右侧添加箭头 -->
		<!-- clickable：为列表项添加点击反馈 + 监听click事件 -->
		<uni-list class="f3">
			<uni-list-item title="收费单位" show-arrow :right-text="collectors.length>0 ? collectors[curCollector].cname : '加载中'" clickable @click="chooseCollector" />
			<uni-list-item title="用户编号">
				<template v-slot:footer>
					<input class="user-id" @input="doUidInput" type="text" placeholder="请输入用户编号"/>
				</template>
			</uni-list-item>
			<uni-list-item title="户名" :right-text="household.householdName"></uni-list-item>
			<uni-list-item title="用户住址" :right-text="household.householdAddr"></uni-list-item>
		</uni-list>

		<!-- F4：提交按钮	-->
		<button class="btn-pay" @click="doPay">立即缴费</button>

		<!-- F5：(隐藏楼层)自定义对话框——选择收费单位 -->
		<!-- type：弹出方式，可选值：left/right/top/bottom/center -->
		<uni-popup ref="collectorPopup" type="center">
			<view class="popup">
				<!-- 头部：标题 -->
				<view class="popup-header">
					<text>收费单位</text>
				</view>
				<!-- 主体：收费单位列表 -->
				<view class="popup-body">
					<uni-list class="collector-list">
						<radio-group @change="doCollectorChange">
							<uni-list-item v-for="(c,i) in collectors" :key="i" :title="c.cname">
								<!-- 定制列表项右侧的内容（插槽footer）-->
								<template v-slot:footer>
									<label class="radio">
										<!-- value：radio被选中时可用于提交的值，此处没有绑定 c.cid，而用了 i -->
										<!-- 注意：checked赋值为真假时使用“不全等”判定 -->
										<radio :value="String(i)" color="#090" :checked="i==curCollector"/>
									</label>
								</template>
							</uni-list-item>
						</radio-group>
					</uni-list>
				</view>
				<!-- 尾部：确定和取消按钮 -->
				<view class="popup-footer">
					<button size="mini" @click="popupCancel">取消</button>
					<button size="mini" @click="popupConfirm">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { feeTypes, feeTypeIcons	} from '@/util'
	import { feeAdd, feeCollector, householdQuery } from '@/service'
	export default {
		data() {
			return {
				type: 0, //待缴费用的类型
				feeTypes, //所有的缴费类型
				feeTypeIcons, //每个缴费类型对应的图标
				collectors: [],	//所有的收费单位列表
				curCollector: 0,	//当前用户选中的缴费单位的下标
				tmpCollector: '',	//在单选按钮组中，用户暂时选中的收费单位下标——只有后续点击了“确定”按钮，这个值才应该变为“用户选中的缴费单位下标”
				timer: null, //用于“业主编号”输入框中防抖的定时器
				household: {}, //根据业主编号查询到的业主信息
				amount: '', //用户输入的“缴费金额”
			}
		},
		async onLoad(query) {
			//console.log('缴费支付页面加载完成，onLoad方法的形参：', query)
			if(!query.type){
				this.type = 1	//开发测试阶段，用户直接访问当前页面的话，路由参数中缺少type
			}else {
				this.type = query.type
			}
			//异步请求收费单位列表
			let data = await feeCollector(this.type)
			console.log(data)
			this.collectors = data
		},
		methods: {
			//处理“选择收费单位”列表项单击事件
			chooseCollector() {
				//弹出模态对话框，进行缴费单位的选择
				this.$refs.collectorPopup.open()
			},
			//自定义弹出框点击了“确定”按钮
			popupConfirm(){
				//关闭自定义弹出框
				this.$refs.collectorPopup.close()
				//把用户临时选中的收费单位下标赋值给确定选中的收费单位下标
				this.curCollector = this.tmpCollector
			},
			//自定义弹出框点击了“取消”按钮
			popupCancel(){
				//关闭自定义弹出框
				this.$refs.collectorPopup.close()
				//把用户临时选中的收费单位下标重新赋值为初始值（即空字符串）
				this.tmpCollector = ''
			},
			//处理“收费单位”选择改变事件
			doCollectorChange(e){
				this.tmpCollector =e.detail.value
				//注意：此处没有赋值给curCollector
			},
			//处理“业主编号”输入事件 
			doUidInput(e){
				let hhid = e.detail.value
				if(hhid.length<3){
					return  //输入过短，不进行处理
				}
				//防抖：发起服务器端接口请求
				if(this.timer){	//清除掉之前未执行的任务
					clearTimeout(this.timer)
					this.timer = null
				}
				this.timer = setTimeout(async ()=>{//重建定时器任务
					let data = await householdQuery(hhid)
					console.log(data);
					if(data.code===2000){
						this.household = data.msg
					}else {		//根据业主编号未查到业主信息
						this.household = {}
					}
				}, 2000)
			},
			//处理“立即缴费”事件
			async doPay(){
				//如果用户没有输入“缴费金额”，弹出吐司提示框
				if(!this.amount){
					uni.showToast({	title: '缴费金额不能为空', icon: 'none'	})
					return 
				}
				//如果用户没有输入正确的“业主编号”，弹出吐司提示框
				if(!this.household.householdId){
					uni.showToast({ title: '业主编号不能为空', icon: 'none'	})
					return
				}
				//调用服务器数据API，实现缴费记录的添加
				let data = await feeAdd(this.type, this.collectors[this.curCollector].cid, this.household.householdId, this.amount)
				if(data.code===2000){  									//缴费成功	
					uni.showToast({ title: '缴费成功' })
					this.amount = ''//清除用户的输入
					this.household = {}
				}else {  																//缴费失败
					uni.showModal({
						title: '错误',
						content:'缴费失败！错误原因：'+data.msg
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-navbar__content {
		width: 100%;
	}

	::v-deep .uni-navbar__header {
		width: 100%;
	}

	.f2 {
		margin-top: $uni-spacing-col-base; //上外间距

		.pay-amount {
			align-items: center; //弹性容器中的子元素在交叉轴上对齐：居中

			input {
				font-size: $uni-font-size-base; //字体大小
				width: 8em; //宽度
			}

			text {
				font-size: $uni-font-size-base; //字体大小
			}
		}
	}

	.f3 {
		margin-top: $uni-spacing-col-base; //上外间距
		::v-deep .uni-list-item__content-title {
			font-size: $uni-font-size-base; //字体大小
		}
		.user-id {
			width: 8em;//宽度
			font-size: $uni-font-size-base;//文字大小
		}
		::v-deep  .uni-list-item__content-title  span {
			display: inline-block;//显示模式
			width: 4em;
			text-align-last: justify;//最后一行文字对齐方式：两端调整对齐
		}
	}

	.btn-pay {
		margin: $uni-spacing-col-lg*4  $uni-spacing-row-lg  0;//上左右外间距
		background-color: $zh-theme-color;//背景色
		color: #fff;//文字颜色
		font-size: $uni-font-size-base;//文字大小
		//当前元素按下时，背景颜色加深5%
		&:active {
			background-color: darken($zh-theme-color, 5%);
		}
	}


	.popup {
		flex-direction: column; //弹性容器的主轴方向：纵向
		width: 600rpx; //宽度
		background-color: $uni-bg-color; //背景颜色
		border-radius: $uni-border-radius-lg; //边框圆角
		overflow: hidden; //隐藏子元素溢出的尖角
		.popup-header {
			background-color: $zh-theme-color; //背景颜色
			color: #fff; //文字颜色
			justify-content: center; //文字居中
			padding: $uni-spacing-col-base; //上下方向的内边距
		}
		.popup-body {
			.collector-list {
				width: 100%;
			}
		}
		.popup-footer {
			padding: $uni-spacing-col-base  0;//上下内边距
		}
	}
</style>